<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-col :span="24" class="container">
            <baidu-map class="map"
                       :center="{lng: 116.404, lat: 39.915}"
                       :zoom="14"
                       :scroll-wheel-zoom="true"
                       @mousemove="syncPolyline"
                       @click="paintPolyline"
                       @rightclick="newPolyline">
              <bm-control>
              </bm-control>
              <bm-polyline :path="path" v-for="path of polyline.paths"></bm-polyline>
            </baidu-map>
          </el-col>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>


<script>
export default {
  data () {
    return {
      polyline: {
        editing: false,
        paths: []
      }
    }
  },
  methods: {
    syncPolyline (e) {
      if (!this.polyline.editing) {
        return
      }
      const {paths} = this.polyline
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    newPolyline (e) {
      if (!this.polyline.editing) {
        return
      }
      const {paths} = this.polyline
      if(!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
    },
    paintPolyline (e) {
      if (!this.polyline.editing) {
        return
      }
      const {paths} = this.polyline
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
.container{
  padding-bottom: 70px;
  height: calc(100vh - 110px);
  .map{
    height: 100%;
  }
}
</style>
